<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="title"
    :width="width"
    :close-on-click-modal="closeOnClickModal"
    @close="handleClose"
  >
    <div class="dialog-content">
      <slot></slot>
    </div>
    <template #footer>
      <slot name="footer">
        <div class="dialog-footer">
          <common-button @click="handleCancel" size="small">取消</common-button>
          <common-button @click="handleConfirm" type="primary" size="small">确定</common-button>
        </div>
      </slot>
    </template>
  </el-dialog>
</template>

<script>
import CommonButton from '../Button'

export default {
  name: 'CommonDialog',
  components: {
    CommonButton
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '50%'
    },
    closeOnClickModal: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    handleCancel() {
      this.dialogVisible = false
      this.$emit('cancel')
    },
    handleConfirm() {
      this.$emit('confirm')
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-content {
  padding: 10px 0;
}

.dialog-footer {
  text-align: right;
  padding-top: 10px;

  .common-button + .common-button {
    margin-left: 10px;
  }
}
</style>